<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>danrudanchu</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background: yellow;
			float: left;
			filter: alpha(opacity:30);
			opacity: 0.3;
			border: 20px solid black;

		}
	</style>
	<script>
		window.onload=function () {
			function getStyle(obj, name)
			{
				if (obj.currentStyle)
				{
					return obj.currentStyle[name];
				}
				else
				{
					return getComputedStyle(obj, false)[name];
				}
			}

			function startMove(obj, attr, iTarget) {
				if (obj.timer != null) {

					clearInterval(obj.timer);
				}
				obj.timer = setInterval(function () {
					var cur = 0;
					if (attr == "opacity") {
						cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
					} else {
						cur = parseInt(getStyle(obj, attr));
					}
					var speed = (iTarget - cur) / 6;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					if (cur == iTarget) {
						clearInterval(obj.timer);
					} else {
						if (attr == "opacity") {
							obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
							obj.style.opacity = (cur + speed) / 100;

						}
						else {
							obj.style[attr] = cur + speed + "px";
						}
					}
				}, 30)

			}


			var aDiv = document.getElementsByTagName("div");

			for(var i=0;i<aDiv .length;i++) {
				aDiv [i].timer = null;

				aDiv [i].onmouseover = function ()
				{
					startMove(this, "height", 500);


				};
				aDiv [i].onmouseout = function ()
				{
					startMove(this, "height", 200);

				};
			}
		}
	</script>


</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>